import React from 'react';
import { useSelector } from 'react-redux';
import { List } from 'antd-mobile';
import { RootState } from '../store/store';

const History: React.FC = () => {
  const history = useSelector((state: RootState) => state.detection.history);

  return (
    <div className="history-container">
      <List header='检测历史记录'>
        {history.map((record, index) => (
          <List.Item
            key={index}
            description={
              <>
                <div>角度: {record.angle}°</div>
                <div>距离: {record.distance}cm</div>
                {record.email && <div>接收邮箱: {record.email}</div>}
              </>
            }
          >
            {new Date(record.timestamp).toLocaleString()}
          </List.Item>
        ))}
        {history.length === 0 && (
          <List.Item>暂无检测记录</List.Item>
        )}
      </List>
    </div>
  );
};

export default History; 